<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
	<meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
    <title>选择自提点</title>
	<link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
	<!-- <script src="http://sdk.talkingdata.com/app/h5/v1?appid=DE13C350F41F5DE78FEC51DB5DE730D1&vn=v2&vc=v2"></script> -->
	<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
	<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
	<script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
	<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/alertMsg.js{$Think.config.RESOURCE_VER}"></script>
</head>
<body>
<style>
	@font-face {
		font-family: 'iconfont';
		src: url('//at.alicdn.com/t/font_1462847968_44.eot'); /* IE9*/
		src: url('//at.alicdn.com/t/font_1462847968_44.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('//at.alicdn.com/t/font_1462847968_44.woff') format('woff'), /* chrome、firefox */
		url('//at.alicdn.com/t/font_1462847968_44.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
		url('//at.alicdn.com/t/font_1462847968_44.svg#iconfont') format('svg'); /* iOS 4.1- */
	}
	.iconfont{
		font-family:iconfont !important;
	}
	body{
		background-color:#F5F5F5;
		font-size:16px;
		color:#6F6E6E;
	}
	.container_top{
		background-color:{$mallHue.mainColor||default='#F75493'};
		height:40px;
		line-height:40px;
		text-align: center;
		color:white;
	}
	.container_top a{
		float: left;
		margin-left: 10px;
		color:white;
	}
	.userInfo{
		background-color:white;
		padding:5px 10px;
		line-height:37px;
	}
	.userInfo>div{
		padding:5px 0;
	}
	.userInfo input{
		border: 1px solid #ccc;
		width: calc(100% - 50px);
		width: -webkit-calc(100% - 50px);
		border-radius: 4px;
		padding:0 10px;
		box-sizing:border-box;
		color:#6F6E6E;
	}
	.storeInfo{
		margin:10px 0;
		padding:5px 0;
		line-height:45px;
		background-color:white;
	}
	.storeInfo li{
		padding:0 10px;
		border-bottom:1px solid #ccc;
	}
	.storeInfo li:last-child{
		border:none;
	}
	/* .storeInfo li .selStore{
		background-color:{$mallHue.mainColor||default='#F75493'};
		color:white;
		padding:5px 10px;
		margin-left:20px;
	} */
	.storeInfo li .phone{
		color: {$mallHue.fontColor||default='#F75493'};
		font-size: 18px;
		margin-left: 20px;
	}
	.container_bottom{
		margin-top:30px;
		padding:0 10px;
		text-align:center;
	}
	.container_bottom a{
		display:block;
		height:40px;
		line-height:40px;
		color:white;
		border-radius:4px;
		margin-bottom:10px;
	}
	.container_bottom a:nth-child(1){
		background-color:{$mallHue.mainColor||default='#F75493'};
	}
	.container_bottom a:nth-child(2){
		background-color:#B8B4B5;
	}
	.pickupList{
		position:fixed;
		top:40px;
		width:100%;
		height:100%;
		background-color:#F5F5F5;
		font-size:16px;
		color:#6F6E6E;
		display:none;
		overflow-y: scroll;
	}
	.pickupList .top{
		height: 47px;
		line-height: 47px;
		background-color:white;
		width:100%;
		z-index:4;
	}
	.pickupList .top>.screen{
		display: -webkit-box;
	}
	.pickupList .top>.screen>div{
		-webkit-box-flex: 1;
		position:relative;
	}
	.pickupList .top.screen>div:after{
		content: "";
		border-right: 1px solid #ccc;
		position: absolute;
		top: 50%;
		transform: translate(0,-50%);
		right: 0;
		height: 25px;
	}
	.pickupList .top>.screen>div:last-child:after{
		border:none;
	}
	.pickupList .top>.screen>div{
		text-align: center;
		position: relative;
	}
	.pickupList .top >.screen>div i{
		font-family:iconfont;
		margin-left: 10px;
	}
	.pickupList .top >ul {
		background-color:white;
		transition: 0.2s height linear;
		-webkit-transition: 0.2s height linear;
		height: 0;
		overflow: hidden;
		position: relative;
		width: 100%;
		top: -2px;
		z-index: 4;
	}
	.pickupList .top > ul>li{
		height:47px;
		padding:0 10px;
		line-height:47px;
		border-top:1px solid #F5F5F5;
	}
	.pickupList .list{
		z-index: 1;
		position: relative;
		margin-bottom: 100px;
	}
	.pickupList .list li {
		overflow: hidden;
		position: relative;
		background-color: white;
		margin-bottom:10px;
	}
	.pickupList .list li:last-child{
		margin-bottom:0;
	}
	.pickupList .list li .storeInfo{
		display: inline-block;
		float: left;
		width: 100%;
		padding: 10px 40px 10px 10px;
		box-sizing: border-box;
		line-height: 23px;
	}
	.pickupList .list li .storeInfo>div{
		margin-top:10px;
	}
	.pickupList .list li .storeInfo>div:first-child{
		font-weight: 900;
		margin-top:0;
	}
	.pickupList .list li .storeInfo a{
		font-family:iconfont;
		color: {$mallHue.fontColor||default='#F75493'};
		font-size: 18px;
		margin-left: 20px;
	}
	.pickupList .list li .radio{
		position: absolute;
		top: 50%;
		right: 10px;
		width: 20px;
		height: 20px;
		border: 1px solid #ddd;
		border-radius: 50%;
		font-family: iconfont;
		font-size:0;
		transform: translate(0,-50%);
		-webkit-transform: translate(0,-50%);
		color:white;
		background-color:white;
		text-align: center;
	}
	.pickupList .list li .radio.checked{
		line-height: 20px;
		color: white;
		background-color: {$mallHue.mainColor||default='#F75493'};
		font-size: 13px;
	}
	.pickupList .bottom{
		display:-webkit-box;
		background-color:white;
		text-align: center;
		position: fixed;
		width: 100%;
		z-index: 2;
		bottom: 0;
	}
	.pickupList .bottom a{
		-webkit-box-flex: 1;
		height:53px;
		line-height:53px;
		display:block;
	}
	.pickupList .bottom a:first-child{
		background-color: {$mallHue.mainColor||default='#F75493'};
		color: white;
		border-right: 1px solid #F5F5F5;
	}
	.pickupList .mark{
		position:fixed;
		width:100%;
		height:100%;
		background-color:rgba(0,0,0,.5);
		z-index:3;
		display:none;
	}
</style>
<div class="container">
	<div class="container_top">
		<a href="javascript:pickup._back();" class="iconfont">&#xe60a;</a>
		<span>自提</span>
	</div>
	<div class="userInfo">
		<div>请填写您的姓名和联系方式</div>
		<div>
			<span>姓名：</span>
			<input type="text" id="name" value="{$fullName}"/>
		</div>
		<div>
			<span>电话：</span>
			<input type="text" id="phone" value="{$phone}"/>
		</div>

	</div>
	<div class="container_bottom">
		<a id="saveBtn">下一步</a>
	</div>
</div>
<div class="pickupList" id="pickupList">
	<div class="storeInfo" data-storeid="{$storeInfo.id}">
		<ul>
			<li>
				自提点名称：<span id="selStoreName">{$storeInfo.name}</span>
			</li>
			<li>
				自提点电话：<span id="selPhone">{$storeInfo.phone}</span><a class="phone iconfont" href="tel:{$storeInfo.phone}" <if condition="$storeInfo.phone eq ''">style="display:none;"</if>>&#xe60f;</a>
			</li>
			<li>
				自提点地址：<span id="selAddress">{$storeInfo.address}</span>
			</li>
		</ul>
	</div>
	<div class="top">
		<div class="screen">
			<div id="region"><span>区域</span><i>&#xe610;</i></div>
			<div id="range"><span>范围</span><i>&#xe610;</i></div>
			<div id="sort"><span>排序</span><i>&#xe610;</i></div>
		</div>
		<ul id="regionList"></ul>
		<ul id="rangeList"></ul>
		<ul id="sortList">
			<li data-sort="name">名称</li>
		</ul>
	</div>
	<div class="mark"></div>
	<div class="list" id="list">

	</div>
	<div class="bottom">
		<a id="saveStore">确定</a>
		<a id="cannelBtn">取消</a>
	</div>
</div>
<script type="text/html" id="listTpl">
	<%if(storeList){%>
	<ul>
		<%for(var i=0;i<storeList.length;i++){
			var store = storeList[i];
		%>
			<li>
				<div class="storeInfo">
					<div>自提点名称：<span id="storeName"><%=store.name%></span></div>
					<div>电　　话：<span id="storePhone"><%=store.phone%></span><a href="tel:<%=store.phone%>">&#xe60f;</a></div>
					<div>地　　址：<span id="storeAddress"><%=store.province%><%=store.city%><%=store.country%><%=store.address%></span></div>
				</div>
				<div class="radio" data-storeid="<%=store.id%>">&#xe60e;</div>
			</li>
		<%}%>
	</ul>
	<%}%>
</script>
<script>
	var baseUrl = '{$Think.config.SERVER_HOST}';
	var pickup ={
		parentId:'',
		code:'',
		sort:'name',
		init:function(){
			this._initEvent();
		},
		_loadList:function(callback){
			var p=$.util.getParamAsObject();
			var me=this;
			$.util.pageLoading.show();
			$.req.get("call.json?module=product&customerId={$customerId}&method=getPickupStore",{
				userName:"{$userName}",
				params: {
					"oid": p.oid,
					"parentId":me.parentId,
					"code":me.code,
					"sort":me.sort
				}
			},function(data){
				if(data){
					var html=template("listTpl", data),
							container = $("#list");
					container.html(html);
					if(data.distristList){
						var distristList = data.distristList;
						var html=[];
						if($("#region").data("parentid")&&!$("#range").data("parentid")){
							for(var i=0;i<distristList.length;i++){
								var dis = distristList[i];
								html.push("<li data-parentid="+dis.id+" data-code="+dis.code+">"+dis.name+"</li>")
							}
							$("#rangeList").html(html.join(""));
						}else if(!$("#region").data("parentid")){
							html.push("<li>全部</li>");
							for(var i=0;i<distristList.length;i++){
								var dis = distristList[i];
								html.push("<li data-parentid="+dis.id+" data-code="+dis.code+">"+dis.name+"</li>")
							}
							$("#regionList").html(html.join(""));
							$("#rangeList").html("");
						}
					}
					$.util.pageLoading.hide();
					me._radioEvent();
					callback && callback();
				}
			});
		},
		_initEvent:function(){
			var me = this;
			$(".saveBtn").click(function(){
				
			});
			$("#saveBtn").click(function(){
				if(!$("#name").val()){
					$.util.alert("还没有填写姓名!");
					return;
				}
				if(!$("#phone").val()){
					$.util.alert("还没有填写电话!");
					return;
				}
				$("#list").html("");
				me._loadList(function(){
					$("#pickupList").show();
				});
			});
			$("#range").click(function(){
				$('#pickupList').css('overflow', 'hidden');
				$("#sortList").css("height",0);
				$("#regionList").css("height",0);
				var li = $("#rangeList li");
				if($("#rangeList").height()){
					$("#rangeList").css("height",0);
					$(".mark").hide();
				}else{
					var height = li.height()*li.length;
					$("#rangeList").css("height",height);
					$(".mark").show();
				}
			});
			$("#region").click(function(){
				$('#pickupList').css('overflow', 'hidden');
				$("#rangeList").css("height",0);
				$("#sortList").css("height",0);
				var li = $("#regionList li");
				if($("#regionList").height()){
					$("#regionList").css("height",0);
					$(".mark").hide();
				}else{
					var height = li.height()*li.length;
					$("#regionList").css("height",height);
					$(".mark").show();
				}
			});
			$("#sort").click(function(){
				$('#pickupList').css('overflow', 'hidden');
				$("#rangeList").css("height",0);
				$("#regionList").css("height",0);
				var li = $("#sortList li");
				if($("#sortList").height()){
					$("#sortList").css("height",0);
					$(".mark").hide();
				}else{
					var height = li.height()*li.length;
					$("#sortList").css("height",height);
					$(".mark").show();
				}
			});
			$("#sortList li").click(function(){
				$('#pickupList').css('overflow', 'scroll');
				me.sort = $(this).data("sort");
				var sortName = $(this).html();
				me._loadList(function(){
					$("#sort span").html(sortName);
					$("#sortList").height(0);
					$(".mark").hide();
				});
			});

			$('#pickupList').on('click', '#list>ul>li .radio', function (event) {
				var selStore = $("#pickupList #list .radio.checked");
				var selStoreName = selStore.prev().find("#storeName").html();
				var selStorePhone = selStore.prev().find("#storePhone").html();
				var selStoreAddress = selStore.prev().find("#storeAddress").html();
				$("#selStoreName").html(selStoreName);
				$("#selPhone").html(selStorePhone).next().show();
				$("#selAddress").html(selStoreAddress);
			})

			$("#pickupList .bottom #saveStore").click(function(){
				var selStore = $("#pickupList #list .radio.checked");
				if(!selStore.length){
					$.util.alert("还没有选自提点!");
					return;
				}
				var storeId=selStore.data("storeid");
				var selStoreName = selStore.prev().find("#storeName").html();
				var selStorePhone = selStore.prev().find("#storePhone").html();
				var selStoreAddress = selStore.prev().find("#storeAddress").html();
				$("#selStoreName").html(selStoreName);
				$("#selPhone").html(selStorePhone).next().show();
				$("#selAddress").html(selStoreAddress);
				var p = {
					userName: '{$userName}',
					fullname: $("#name").val(),
					phone: $("#phone").val(),
					sid: storeId,
					sname: $("#selStoreName").html(),
					deliverytype: "pickup",
					uId: '{$uId}',
					oId: '{$oid}'
				};
				$.util.pageLoading.show();
				$.req.get("call.json?customerId={$customerId}&module=product&method=updateUserInfo",{
					params:p
				},function(data){
					me._back();
				});
			});
			$("#pickupList .bottom #cannelBtn").click(function(){
				$("#pickupList").hide();
			});
		},
		_radioEvent:function(){
			var me = this;
			$("#list li .radio").one("click",function(){
				if($(this).hasClass("checked")){
					return;
				}
				$("#list li .radio.checked").removeClass("checked");
				$(this).addClass("checked");
			});
			$("#regionList li").one("click",function(){
				$('#pickupList').css('overflow', 'scroll');
				me.parentId = $(this).data("parentid")||"";
				$("#region").data("parentid",me.parentId);
				$("#range").data("parentid","");
				me.code = $(this).data("code");
				var selRegin =$(this).html();
				me._loadList(function(){
					$("#region span").html(selRegin);
					$("#regionList").height(0);
					$("#range span").html("范围");
					$(".mark").hide();
				});
			});
			$("#rangeList li").click(function(){
				$('#pickupList').css('overflow', 'scroll');
				me.parentId = $(this).data("parentid");
				me.code = $(this).data("code");
				$("#range").data("parentid",me.parentId);
				var selrange =$(this).html();
				me._loadList(function(){
					$("#range span").html(selrange);
					$("#rangeList").height(0);
					$(".mark").hide();
				});
			});
		},
		_back:function(){
			var params = {
				"tplid":1,
				"type":"buy",
				"id":"{$oid}"
			};
			var hrefPath = 'call.html?customerId={$customerId}';
			var url = '&module=product&method=getOrderDetail&force=1&params=';
			url = url + JSON.stringify(params);
			location.href = hrefPath + url;
		}
	};
	pickup.init();
</script>
<script>
	wx_share.init({
		"pkg":{
			"appId": '{$pkg.appId}',
			"timestamp": '{$pkg.timestamp}',
			"nonceStr": '{$pkg.nonceStr}',
			"signature": '{$pkg.signature}'
		},
		hide:1
	});
</script>
</body>
</html>